<template>
	<view class="page-container">
		<!-- 顶部操作栏 -->
		<view class="page-header">
			<view class="header-left">
				<text class="page-title">促销活动管理</text>
				<text class="page-subtitle">管理所有促销活动和优惠规则</text>
			</view>
			<view class="header-right">
				<button class="btn btn-primary" @click="handleAdd">
					<text class="icon">+</text> 新增活动
				</button>
			</view>
		</view>

		<!-- 搜索和筛选栏 -->
		<view class="filter-section">
			<view class="search-box">
				<input 
					v-model="searchParams.keyword"
					type="text"
					placeholder="搜索活动标题..."
					class="search-input"
					@confirm="handleSearch"
				/>
				<button class="btn-search" @click="handleSearch">搜索</button>
				<button class="btn-reset" @click="handleReset">重置</button>
			</view>
			
		<!-- 批量操作按钮 -->
		<view v-if="selectedIds.length > 0" class="batch-actions">
			<text class="batch-count">已选中 {{ selectedIds.length }} 项</text>
			<button class="btn btn-success btn-small" @click="handleBatchEnable">批量启用</button>
			<button class="btn btn-warning btn-small" @click="handleBatchDisable">批量禁用</button>
			<button class="btn btn-danger btn-small" @click="handleBatchDelete">删除选中</button>
			<button class="btn btn-default btn-small" @click="handleCancelSelect">取消选择</button>
		</view>
		</view>

		<!-- 数据表格 -->
		<view class="table-wrapper">
			<view v-if="loading" class="loading-state">
				<text class="loading-text">加载中...</text>
			</view>

			<view v-else-if="dataList.length === 0" class="empty-state">
				<text class="empty-icon">🎉</text>
				<text class="empty-text">暂无促销活动</text>
				<button class="btn btn-primary" @click="handleAdd">新增活动</button>
			</view>

			<view v-else class="table-container">
				<!-- 表头 -->
				<view class="table-header">
					<view class="table-cell checkbox-cell">
						<checkbox-group @change="handleSelectAll">
							<label>
								<checkbox :checked="isSelectAll" value="all" />
							</label>
						</checkbox-group>
					</view>
					<view class="table-cell col-title">活动标题</view>
					<view class="table-cell col-category">促销类别</view>
					<view class="table-cell col-target">适用对象</view>
					<view class="table-cell col-discount">优惠内容</view>
					<view class="table-cell col-period">活动时段</view>
					<view class="table-cell col-stats">统计</view>
					<view class="table-cell col-status">状态</view>
					<view class="table-cell col-actions">操作</view>
				</view>

				<!-- 表行 -->
				<view v-for="item in dataList" :key="item._id" class="table-row"
					:class="{ selected: selectedIds.includes(item._id) }">
					<view class="table-cell checkbox-cell" @click.stop>
						<checkbox-group @change="(e) => handleSelectItem(item._id, e)">
							<label>
								<checkbox :checked="selectedIds.includes(item._id)" :value="item._id" />
							</label>
						</checkbox-group>
					</view>
					<view class="table-cell col-title clickable" @click="handleView(item._id)">
						<view class="title-wrapper">
							<text class="title-text">{{ item.title }}</text>
							<text class="description-text">{{ item.description }}</text>
						</view>
					</view>
					<view class="table-cell col-category clickable" @click="handleView(item._id)">
						<view class="category-badge" :class="'category-' + item.promotion_category">
							{{ item.category_text }}
						</view>
					</view>
					<view class="table-cell col-target clickable" @click="handleView(item._id)">
						<view class="target-info">
							<text class="target-label">用户:</text>
							<text class="target-value">{{ item.user_tags_text }}</text>
							<text class="target-label">范围:</text>
							<text class="target-value">{{ item.scope_text }}</text>
							<text v-if="item.apply_scope === 2" class="target-label">类别:</text>
							<text v-if="item.apply_scope === 2" class="target-value">{{ item.categories_text }}</text>
						</view>
					</view>
					<view class="table-cell col-discount clickable" @click="handleView(item._id)">
						<view class="discount-info">
							<text class="discount-main">{{ item.discount_display }}</text>
							<text v-if="item.min_amount > 0" class="discount-sub">最低消费: ￥{{ item.min_amount }}</text>
							<text v-if="item.max_discount_amount > 0" class="discount-sub">封顶: ￥{{ item.max_discount_amount }}</text>
							<text v-if="item.vip_reward_type > 0" class="vip-reward">{{ item.vip_reward_type_text }}</text>
						</view>
					</view>
					<view class="table-cell col-period clickable" @click="handleView(item._id)">
						<view class="period-info">
							<text class="period-date">{{ item.start_date }}</text>
							<text class="period-separator">~</text>
							<text class="period-date">{{ item.end_date }}</text>
						</view>
					</view>
					<view class="table-cell col-stats clickable" @click="handleView(item._id)">
						<view class="stats-info">
							<text class="stats-item">👁 {{ item.view_count || 0 }}</text>
							<text class="stats-item">✓ {{ item.use_count || 0 }}</text>
						</view>
					</view>
				<view class="table-cell col-status" @click.stop>
					<button 
						class="status-badge status-btn" 
						:class="'status-' + item.status"
						@click="handleToggleStatus(item)"
					>
						{{ item.status_text }}
					</button>
				</view>
					<view class="table-cell col-actions" @click.stop>
						<button class="action-btn view-btn" @click="handleView(item._id)">查看</button>
						<button class="action-btn edit-btn" @click="handleEdit(item._id)">编辑</button>
						<button class="action-btn delete-btn" @click="handleDelete(item._id)">删除</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 分页 -->
		<view v-if="dataList.length > 0" class="pagination-section">
			<view class="pagination-info">
				<text>共 {{ total }} 条数据，第 {{ currentPage }} / {{ totalPages }} 页</text>
				<view class="page-size-selector">
					<text class="selector-label">每页显示</text>
					<picker 
						mode="selector" 
						:range="pageSizeOptions" 
						:value="pageSizeIndex"
						@change="handlePageSizeChange"
						class="selector-picker"
					>
						<view class="selector-input">{{ pageSize }} 条</view>
					</picker>
				</view>
			</view>
			<view class="pagination-controls">
				<button 
					:disabled="currentPage === 1"
					class="btn btn-default btn-small"
					@click="handlePreviousPage"
				>上一页</button>
				<button 
					:disabled="currentPage === totalPages"
					class="btn btn-default btn-small"
					@click="handleNextPage"
				>下一页</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 数据状态
const dataList = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)

// 分页选项
const pageSizeOptions = ['10 条', '20 条', '50 条', '100 条']
const pageSizeValues = [10, 20, 50, 100]
const pageSizeIndex = computed(() => pageSizeValues.indexOf(pageSize.value))

// 搜索和过滤
const searchParams = ref({
	keyword: ''
})

// 选择状态
const selectedIds = ref([])

const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
const isSelectAll = computed(() => dataList.value.length > 0 && dataList.value.length === selectedIds.value.length)

// 初始化
onMounted(() => {
	loadData()
})

// 加载数据
async function loadData() {
	loading.value = true
	try {
		const dhPromotions = uniCloud.importObject('dh-hospital_promotions')
		const skip = (currentPage.value - 1) * pageSize.value
		
		// 构建查询条件
		const query = {}
		if (searchParams.value.keyword && searchParams.value.keyword.trim()) {
			query.keyword = searchParams.value.keyword.trim()
		}
		
		const result = await dhPromotions.listPromotions(query, skip, pageSize.value)
		
		if (result.code === 200) {
			dataList.value = result.data || []
			total.value = result.count || 0
			selectedIds.value = []
		} else {
			uni.showToast({ title: result.message || '加载失败', icon: 'error' })
		}
	} catch (error) {
		console.error('加载数据失败:', error)
		uni.showToast({ title: '加载数据失败', icon: 'error' })
	} finally {
		loading.value = false
	}
}

// 搜索
function handleSearch() {
	currentPage.value = 1
	loadData()
}

// 重置搜索
function handleReset() {
	searchParams.value.keyword = ''
	currentPage.value = 1
	loadData()
}

// 选择/取消选择单项
function handleSelectItem(id, e) {
	const values = e.detail.value
	if (values.includes(id)) {
		if (!selectedIds.value.includes(id)) {
			selectedIds.value.push(id)
		}
	} else {
		const index = selectedIds.value.indexOf(id)
		if (index > -1) {
			selectedIds.value.splice(index, 1)
		}
	}
}

// 全选/取消全选
function handleSelectAll(e) {
	const values = e.detail.value
	if (values.includes('all')) {
		selectedIds.value = dataList.value.map(item => item._id)
	} else {
		selectedIds.value = []
	}
}

// 取消选择
function handleCancelSelect() {
	selectedIds.value = []
}

// 新增
function handleAdd() {
	uni.navigateTo({
		url: '/pages/business/hospital_promotions/add'
	})
}

// 查看详情
function handleView(id) {
	uni.navigateTo({
		url: `/pages/business/hospital_promotions/detail?id=${id}`
	})
}

// 编辑
function handleEdit(id) {
	uni.navigateTo({
		url: `/pages/business/hospital_promotions/edit?id=${id}`
	})
}

// 删除单条
async function handleDelete(id) {
	const confirmed = await showConfirm('确认删除', '确定要删除此促销活动吗？')
	if (!confirmed) return

	try {
		const dhPromotions = uniCloud.importObject('dh-hospital_promotions')
		const result = await dhPromotions.deletePromotion(id)
		
		if (result.code === 200) {
			uni.showToast({ title: '删除成功', icon: 'success' })
			loadData()
		} else {
			uni.showToast({ title: result.message || '删除失败', icon: 'error' })
		}
	} catch (error) {
		console.error('删除失败:', error)
		uni.showToast({ title: '删除失败', icon: 'error' })
	}
}

// 批量删除
async function handleBatchDelete() {
	if (selectedIds.value.length === 0) {
		uni.showToast({ title: '请选择要删除的项', icon: 'warning' })
		return
	}

	const confirmed = await showConfirm('批量删除', `确定要删除选中的 ${selectedIds.value.length} 项吗？`)
	if (!confirmed) return

	try {
		const dhPromotions = uniCloud.importObject('dh-hospital_promotions')
		const result = await dhPromotions.batchDeletePromotions(selectedIds.value)
		
		if (result.code === 200) {
			uni.showToast({ title: '批量删除成功', icon: 'success' })
			selectedIds.value = []
			loadData()
		} else {
			uni.showToast({ title: result.message || '批量删除失败', icon: 'error' })
		}
	} catch (error) {
		console.error('批量删除失败:', error)
		uni.showToast({ title: '批量删除失败', icon: 'error' })
	}
}

// 批量启用
async function handleBatchEnable() {
	if (selectedIds.value.length === 0) {
		uni.showToast({ title: '请选择要启用的项', icon: 'warning' })
		return
	}

	const confirmed = await showConfirm('批量启用', `确定要启用选中的 ${selectedIds.value.length} 项吗？`)
	if (!confirmed) return

	try {
		uni.showLoading({ title: '启用中...' })
		const dhPromotions = uniCloud.importObject('dh-hospital_promotions')
		const result = await dhPromotions.batchUpdateStatus(selectedIds.value, 1)
		
		uni.hideLoading()
		
		if (result.code === 200) {
			uni.showToast({ title: '批量启用成功', icon: 'success' })
			selectedIds.value = []
			loadData()
		} else {
			uni.showToast({ title: result.message || '批量启用失败', icon: 'error' })
		}
	} catch (error) {
		console.error('批量启用失败:', error)
		uni.hideLoading()
		uni.showToast({ title: '批量启用失败', icon: 'error' })
	}
}

// 批量禁用
async function handleBatchDisable() {
	if (selectedIds.value.length === 0) {
		uni.showToast({ title: '请选择要禁用的项', icon: 'warning' })
		return
	}

	const confirmed = await showConfirm('批量禁用', `确定要禁用选中的 ${selectedIds.value.length} 项吗？`)
	if (!confirmed) return

	try {
		uni.showLoading({ title: '禁用中...' })
		const dhPromotions = uniCloud.importObject('dh-hospital_promotions')
		const result = await dhPromotions.batchUpdateStatus(selectedIds.value, 2)
		
		uni.hideLoading()
		
		if (result.code === 200) {
			uni.showToast({ title: '批量禁用成功', icon: 'success' })
			selectedIds.value = []
			loadData()
		} else {
			uni.showToast({ title: result.message || '批量禁用失败', icon: 'error' })
		}
	} catch (error) {
		console.error('批量禁用失败:', error)
		uni.hideLoading()
		uni.showToast({ title: '批量禁用失败', icon: 'error' })
	}
}

// 切换单个促销活动的状态
async function handleToggleStatus(item) {
	// 状态切换逻辑：启用(1) <-> 停用(2)
	// 已结束(3)的不允许切换
	if (item.status === 3) {
		uni.showToast({ title: '已结束的活动无法修改状态', icon: 'none' })
		return
	}
	
	const newStatus = item.status === 1 ? 2 : 1
	const statusText = newStatus === 1 ? '启用' : '停用'
	
	const confirmed = await showConfirm('修改状态', `确定要${statusText}此促销活动吗？`)
	if (!confirmed) return
	
	try {
		uni.showLoading({ title: '修改中...' })
		const dhPromotions = uniCloud.importObject('dh-hospital_promotions')
		const result = await dhPromotions.updatePromotion(item._id, { status: newStatus })
		
		uni.hideLoading()
		
		if (result.code === 200) {
			uni.showToast({ title: `${statusText}成功`, icon: 'success' })
			loadData()
		} else {
			uni.showToast({ title: result.message || `${statusText}失败`, icon: 'error' })
		}
	} catch (error) {
		console.error('修改状态失败:', error)
		uni.hideLoading()
		uni.showToast({ title: '修改状态失败', icon: 'error' })
	}
}

// 分页
function handlePreviousPage() {
	if (currentPage.value > 1) {
		currentPage.value--
		loadData()
	}
}

function handleNextPage() {
	if (currentPage.value < totalPages.value) {
		currentPage.value++
		loadData()
	}
}

// 改变每页显示条数
function handlePageSizeChange(e) {
	const index = e.detail.value
	pageSize.value = pageSizeValues[index]
	currentPage.value = 1  // 重置到第一页
	loadData()
}

// 辅助函数
function showConfirm(title, content) {
	return new Promise((resolve) => {
		uni.showModal({
			title,
			content,
			confirmText: '确定',
			cancelText: '取消',
			success: (res) => {
				resolve(res.confirm)
			}
		})
	})
}
</script>

<style scoped lang="scss">
.page-container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	background: white;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-left {
	display: flex;
	flex-direction: column;
}

.page-title {
	font-size: 20px;
	font-weight: 600;
	color: #1f2937;
	margin-bottom: 4px;
}

.page-subtitle {
	font-size: 12px;
	color: #6b7280;
}

.header-right {
	display: flex;
	gap: 10px;
}

.btn {
	padding: 6px 14px;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	box-sizing: border-box;

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&.btn-primary {
		background-color: #3b82f6;
		color: white;

		&:active {
			background-color: #2563eb;
		}
	}

	&.btn-default {
		background-color: #e5e7eb;
		color: #374151;

		&:active {
			background-color: #d1d5db;
		}
	}

	&.btn-danger {
		background-color: #ef4444;
		color: white;

		&:active {
			background-color: #dc2626;
		}
	}

	&.btn-success {
		background-color: #10b981;
		color: white;

		&:active {
			background-color: #059669;
		}
	}

	&.btn-warning {
		background-color: #f59e0b;
		color: white;

		&:active {
			background-color: #d97706;
		}
	}

	&.btn-small {
		padding: 6px 12px;
		font-size: 12px;
	}
}

.icon {
	font-size: 16px;
}

.filter-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}

.search-box {
	display: flex;
	gap: 8px;
	background: white;
	padding: 12px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.search-input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	height: 38px;
	box-sizing: border-box;

	&:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
	}
}

.btn-search {
	padding: 8px 16px;
	background-color: #3b82f6;
	color: white;
	border: 1px solid #3b82f6;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	height: 38px;
	box-sizing: border-box;
	display: flex;
	align-items: center;

	&:active {
		background-color: #2563eb;
	}
}

.btn-reset {
	padding: 8px 16px;
	background-color: #e5e7eb;
	color: #374151;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	height: 38px;
	box-sizing: border-box;
	display: flex;
	align-items: center;

	&:active {
		background-color: #d1d5db;
	}
}

.batch-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	background: white;
	padding: 12px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.batch-count {
	font-size: 14px;
	color: #6b7280;
	font-weight: 500;
}

.table-wrapper {
	background: white;
	border-radius: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;

	/* 自定义滚动条样式 */
	&::-webkit-scrollbar {
		height: 8px;
	}

	&::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 4px;
	}

	&::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 4px;
		transition: background 0.3s ease;

		&:hover {
			background: #a8a8a8;
		}
	}
}

.loading-state,
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
}

.loading-text {
	font-size: 14px;
	color: #6b7280;
}

.empty-icon {
	font-size: 48px;
	margin-bottom: 12px;
}

.empty-text {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 16px;
}

.table-container {
	width: max-content;
	min-width: 100%;
}

.table-header {
	display: grid;
	grid-template-columns: 40px 240px 120px 180px 180px 150px 100px 90px 140px;
	gap: 12px;
	padding: 12px 16px;
	background-color: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.5px;

	.table-cell {
		justify-content: center;
	}
}

.table-row {
	display: grid;
	grid-template-columns: 40px 240px 120px 180px 180px 150px 100px 90px 140px;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	align-items: center;
	transition: background-color 0.2s ease, border-left 0.2s ease;

	&:hover {
		background-color: #f9fafb;
	}

	&:last-child {
		border-bottom: none;
	}

	&.selected {
		background-color: #eff6ff;
		border-left: 3px solid #3b82f6;
		padding-left: 13px;
	}

	.table-cell {
		justify-content: center;
	}

	.col-actions {
		justify-content: flex-start;
		padding-left: 8px;
	}
}

.table-cell {
	display: flex;
	align-items: center;
}

.checkbox-cell {
	justify-content: center;

	checkbox-group {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	label {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	checkbox {
		transform: scale(1.1);
	}
}

.col-title {
	flex-direction: column;
	align-items: flex-start;
}

.title-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
}

.title-text {
	font-size: 14px;
	font-weight: 600;
	color: #1f2937;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.description-text {
	font-size: 12px;
	color: #6b7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.category-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;

	&.category-1 {
		background-color: #dbeafe;
		color: #1e40af;
	}

	&.category-2 {
		background-color: #fef3c7;
		color: #92400e;
	}

	&.category-3 {
		background-color: #fce7f3;
		color: #831843;
	}

	&.category-4 {
		background-color: #d1fae5;
		color: #065f46;
	}
}

.target-info,
.discount-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
}

.target-label {
	font-size: 11px;
	color: #6b7280;
	font-weight: 500;
}

.target-value {
	font-size: 12px;
	color: #1f2937;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.discount-main {
	font-size: 14px;
	font-weight: 700;
	color: #dc2626;
}

.discount-sub {
	font-size: 11px;
	color: #6b7280;
}

.vip-reward {
	font-size: 11px;
	color: #9333ea;
	font-weight: 600;
	padding: 2px 6px;
	background-color: #fae8ff;
	border-radius: 3px;
	margin-top: 2px;
}

.period-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.period-date {
	font-size: 12px;
	color: #1f2937;
}

.period-separator {
	font-size: 12px;
	color: #6b7280;
}

.stats-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.stats-item {
	font-size: 12px;
	color: #6b7280;
}

.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;

	&.status-1 {
		background-color: #d1fae5;
		color: #065f46;
	}

	&.status-2 {
		background-color: #fef3c7;
		color: #92400e;
	}

	&.status-3 {
		background-color: #e5e7eb;
		color: #374151;
	}

	&.status-btn {
		border: none;
		cursor: pointer;
		transition: all 0.3s ease;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
		}

		&:active {
			transform: translateY(0);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
		}

		&.status-1:hover {
			background-color: #a7f3d0;
		}

		&.status-2:hover {
			background-color: #fde68a;
		}

		&.status-3 {
			cursor: not-allowed;
			opacity: 0.7;

			&:hover {
				transform: none;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
			}
		}
	}
}

.col-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: flex-start;
}

.clickable {
	cursor: pointer;
	transition: background-color 0.2s ease;

	&:hover {
		background-color: #f9fafb;
	}
}

.action-btn {
	padding: 4px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	transition: all 0.3s ease;
	white-space: nowrap;
	height: 26px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-width: 50px;
	justify-content: center;

	&.view-btn {
		background-color: #dbeafe;
		color: #1e40af;

		&:hover {
			background-color: #bfdbfe;
		}

		&:active {
			background-color: #93c5fd;
		}
	}

	&.edit-btn {
		background-color: #fef3c7;
		color: #92400e;

		&:hover {
			background-color: #fde68a;
		}

		&:active {
			background-color: #fcd34d;
		}
	}

	&.delete-btn {
		background-color: #fee2e2;
		color: #991b1b;

		&:hover {
			background-color: #fecaca;
		}

		&:active {
			background-color: #fca5a5;
		}
	}
}

.pagination-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: white;
	padding: 16px;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pagination-info {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 12px;
	color: #6b7280;
}

.page-size-selector {
	display: flex;
	align-items: center;
	gap: 8px;
}

.selector-label {
	font-size: 12px;
	color: #6b7280;
}

.selector-picker {
	flex-shrink: 0;
}

.selector-input {
	padding: 4px 8px;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	font-size: 12px;
	color: #374151;
	background-color: white;
	cursor: pointer;
	min-width: 70px;
	text-align: center;
}

.pagination-controls {
	display: flex;
	gap: 8px;
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
	.page-container {
		padding: 12px;
	}

	.page-header {
		flex-direction: row;
		align-items: center;
		gap: 8px;
		padding: 12px;
	}

	.header-left {
		flex: 1;
		min-width: 0;
	}

	.header-right {
		flex-shrink: 0;
	}

	.page-title {
		font-size: 16px;
	}

	.page-subtitle {
		font-size: 11px;
		line-height: 1.4;
	}

	.btn {
		padding: 6px 12px;
		font-size: 13px;
		height: auto;
	}

	.search-box {
		flex-wrap: wrap;
	}

	.search-input {
		width: 100%;
		flex: 1 1 100%;
		margin-bottom: 8px;
	}

	.btn-search,
	.btn-reset {
		flex: 1;
		justify-content: center;
	}

	.batch-actions {
		flex-wrap: wrap;
	}

	/* 表格容器添加横向滚动 */
	.table-wrapper {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch; /* iOS平滑滚动 */

		/* 移动端滚动条样式 */
		&::-webkit-scrollbar {
			height: 6px;
		}

		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 3px;

			&:hover {
				background: #a8a8a8;
			}
		}
	}

	.table-container {
		min-width: 1340px; /* 设置最小宽度，允许横向滚动 */
	}

	/* 分页区域 */
	.pagination-section {
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
	}

	.pagination-info {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		width: 100%;
	}

	.page-size-selector {
		width: 100%;
		justify-content: space-between;
	}

	.selector-picker {
		flex: 0 0 auto;
	}

	.selector-input {
		min-width: 80px;
	}

	.pagination-controls {
		width: 100%;
		justify-content: space-between;
	}

	.btn.btn-small {
		flex: 1;
	}
}
</style>
